<template>
	<!-- 使用自定义的搜索组件 -->
	<!-- <my-search :bgcolor="'pink'" :radius="12"></my-search> -->
	<my-search @click="gotoSearch"></my-search>
	<view class="container">		
		<!-- 左侧分类 -->
		<scroll-view scroll-y class="left-scroll" :style="{height: wh + 'px'}" :scroll-with-animation="false">
			<view v-for="(item, i) in cateList" :key="i" :class="['left-item', active === i ? 'active' : '']"
				@click="switchCategory(i)">
				{{item.cat_name}}
			</view>
		</scroll-view>

		<!-- 右侧内容 -->
		<scroll-view scroll-y class="right-scroll" :style="{height: wh + 'px'}" :scroll-into-view="scrollToView"
			:scroll-with-animation="true" @scroll="onScroll">
			<!-- 顶部锚点（关键） -->
			<view id="topAnchor" style="height:0;"></view>
			<!-- 二级分类 -->
			<view v-for="(item2, i2) in cateLevel2" :key="i2" class="category-item">
				<view class="title">{{item2.cat_name}}</view>
				<!-- 三级分类 -->
				<view class="goods-list">
					<view v-for="(item3, i3) in item2.children" :key="i3" class="goods-item" @click="gotoGoodsList(item3)">
						<image :src="item3.cat_icon" mode="aspectFill"></image>
						<text>{{item3.cat_name}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import badgeMix from '@/mixins/tabbar-badge.js'
	export default {
		mixins:[badgeMix],
		data() {
			return {
				wh: 0, // 窗口高度
				cateList: [], // 分类数据
				active: 0, // 当前选中分类
				cateLevel2: [], // 二级分类
				scrollToView: '', // 滚动定位id
				lastScrollTop: 0 // 记录滚动位置
			}
		},
		onLoad() {
			// 获取屏幕高度（需减去导航栏等高度）
			const sysInfo = uni.getSystemInfoSync()
			this.wh = sysInfo.windowHeight - 50 // 减去顶部导航栏高度

			this.loadData()
		},
		methods: {
			async loadData() {
				const {
					data: res
				} = await uni.$http.get('/api/public/v1/categories')
				if (res.meta.status !== 200) return uni.$showMsg()

				this.cateList = res.message
				this.cateLevel2 = res.message[0].children
			},
			

			// 切换分类i
			switchCategory(i) {
				if (this.active === i) return

				this.active = i
				this.cateLevel2 = this.cateList[i].children

				// 关键代码：先重置再设置（解决微信小程序不触发问题）
				this.scrollToView = ''
				this.$nextTick(() => {
					this.scrollToView = 'topAnchor'
					setTimeout(() => {
						this.scrollToView = ''
					}, 300)
				})
			},
			gotoGoodsList(item){
				uni.navigateTo({
					url:'/subpkg/goods_list/goods_list?cid='+item.cat_id
				})
			},
			
			gotoSearch(){
				uni.navigateTo({
					url:'/subpkg/search/search'
				})
			},
			

			// 记录滚动位置（可选）
			onScroll(e) {
				this.lastScrollTop = e.detail.scrollTop
			}
		}
	}
</script>

<style scoped>
	.container {
		display: flex;
		width: 100%;
		overflow: hidden;
	}

	.left-scroll {
		width: 120px;
		background-color: #f8f8f8;
	}

	.left-item {
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		position: relative;
	}

	.left-item.active {
		background-color: #fff;
		color: #c00;
	}

	.left-item.active::before {
		content: '';
		position: absolute;
		left: 0;
		top: 15px;
		bottom: 15px;
		width: 3px;
		background-color: #c00;
	}

	.right-scroll {
		flex: 1;
		padding: 10px;
	}

	.title {
		font-size: 14px;
		font-weight: bold;
		padding: 15px 0;
		text-align: center;
	}

	.goods-list {
		display: flex;
		flex-wrap: wrap;
	}

	.goods-item {
		width: 33.33%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 15px;
	}

	.goods-item image {
		width: 60px;
		height: 60px;
	}

	.goods-item text {
		font-size: 12px;
		margin-top: 5px;
	}
</style>